<!DOCTYPE html>
<html>
    <head>
        <!--
            1.引入vue.js 文件
            2.new初始化vue实例
            3.data设置需要监听的属性值
            4.watch添加与监听属性同名的监听函数,参数为newName\oldName
            5.监听的属性使用v-model绑定至控件
        -->
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="cityName" ><!--v-model实现控件双向数据绑定-->
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data: {
                    cityName: 'Shanghai'
                },
                watch : {
                    cityName(newName,oldName){
                        console.log(newName,oldName);
                    }
                }
            })
        </script>
    </body>
</html>